<template>
  <div>
    <div v-if="needCreate">
      <el-form :model="problem" label-width="80px">
        <el-form-item label="问题标题">
          <el-input v-model="problem.item" placeholder="请输入标题" maxlength="64"></el-input>
        </el-form-item>
        <el-form-item label="问题内容">
          <el-input v-model="problem.content" placeholder="请输入问题内容" type="textarea" maxlength="300"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitQ()">提交</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div v-else>
      <el-row>
        <el-col :span="24">
          <h3>{{problem.item}}</h3>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="6">
          <el-card>
            {{problem.username}}
            <br>
            {{problem.startTime}}
          </el-card>
        </el-col>
        <el-col :span="18">
          <el-card>{{problem.content}}</el-card>
        </el-col>
      </el-row>
      <el-row v-for="discussion in problem.discussions" :key="discussion.creatTime">
        <el-col :span="6">
          <el-card>
            {{discussion.username}}
            <br>
            {{discussion.startTime}}
          </el-card>
        </el-col>
        <el-col :span="18">
          <el-card>{{discussion.content}}</el-card>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form :model="discussion" label-width="80px">
            <el-form-item label="回复">
              <el-input
                v-model="discussion.content"
                placeholder="请输入回复内容"
                type="textarea"
                maxlength="300"
              ></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="submitDiscussion()">提交</el-button>
            </el-form-item>
          </el-form>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import {
  getprojectinfos,
  postprojectinfos,
  getinfosbyid,
  postinfosbyid
} from "@/api/table";

export default {
  data() {
    return {
      needFresh: false,
      needCreate: true,
      project: null,
      problemId: null,
      problem: {
          item: null,
          content: null,
      },
      discussion: {
          content: null,
      },
    };
  },
  watch: {
    needFresh: function() {
      this.getProblem();
      this.needFresh = false;
    }
  },
  created() {
    this.project = this.$route.params.pjname;
    this.problemId = this.$route.params.id;
    if (this.problemId !== "new" && this.problemId) {
      this.needCreate = false;
      this.getProblem();
    } else {
      this.needCreate = true;
    }
  },
  methods: {
    submitQ() {
      postprojectinfos(this.project, "problem", this.problem).then(res => {
        if (res.data.success === 1) {
          this.$message({
            message: "提交成功",
            type: "success"
          });
          this.problemId = res.data.id;
          this.needCreate = false;
          this.needFresh = true;
        }
      });
    },
    getProblem() {
      getinfosbyid("problem", this.problemId).then(res => {
        this.problem = res.data;
      });
    },
    submitDiscussion() {
      postinfosbyid("problem", this.problemId,this.discussion).then(res => {
        if (res.data.success === 1) {
          this.$message({
            message: "提交成功",
            type: "success"
          });
          this.needFresh = true;
        }
      });
    }
  }
};
</script>

